<template>
  <!-- 基金净值图表容器：包裹整个图表组件 -->
  <div class="net-value-chart-container">
    <!-- Element Plus卡片组件：提供带阴影的容器，hover时阴影加深 -->
    <el-card shadow="hover">
      <!-- 卡片头部插槽：显示图表标题 -->
      <div slot="header" class="chart-header">
        <span>基金历史净值走势</span>
      </div>
      <!-- 图表包裹层：包含图表容器 -->
      <div class="chart-wrapper">
        <!-- 图表容器：通过ref关联到脚本，用于初始化ECharts实例 -->
        <div ref="chartRef" class="chart" />
      </div>
    </el-card>
  </div>
</template>

<script setup>
// 导入Vue 3组合式API核心函数
import { ref, shallowRef, watch, onMounted, nextTick, onUnmounted } from 'vue'
// 导入ECharts核心模块
import * as echarts from 'echarts'
// 导入Element Plus消息提示组件
import { ElMessage } from 'element-plus'

/**
 * 组件Props定义
 * @property {Array} netValueData - 基金历史净值数据（必传）
 * 数据格式示例: [{ "date": "2025-07-31", "unitNav": 100.754 }, ...]
 */
const props = defineProps({
  netValueData: {
    type: Array,
    required: true,
    default: () => []
  }
})

// 图表容器DOM引用：用于挂载ECharts实例
const chartRef = ref(null)
// ECharts实例引用：使用shallowRef避免深度响应式（性能优化）
const chartInstance = shallowRef(null)

/**
 * 初始化ECharts图表
 * @description 创建或重建ECharts实例，配置图表基础选项
 */
const initChart = () => {
  // 若已有实例，先销毁（避免重复创建导致内存泄漏）
  if (chartInstance.value) {
    chartInstance.value.dispose()
  }
  // 创建新的ECharts实例，挂载到图表容器
  chartInstance.value = echarts.init(chartRef.value)

  // 图表配置项：定义图表的外观和交互逻辑
  const option = {
    // 提示框配置：鼠标悬浮时显示数据详情
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: function (params) {
        const date = new Date(params[0].data[0]).toLocaleDateString()
        let result = `${date}<br/>`
        params.forEach(item => {
          result += `${item.seriesName}: ${item.data[1].toFixed(4)}<br/>`
        })
        return result
      }
    },
    // 图例配置：显示线的名称，与series.name对应
    legend: {
      data: ['单位净值'],
      top: 0
    },
    // 网格配置：控制图表绘图区域的边距
    grid: {
      left: '3%',
      right: '4%',
      bottom: '15%',
      containLabel: true
    },
    // X轴配置：时间轴
    xAxis: {
      type: 'time',
      boundaryGap: false,
      axisLabel: {
        formatter: (value) => {
          return new Date(value).toLocaleDateString('zh-CN', {
            year: 'numeric',
            month: '2-digit'
          })
        },
        rotate: 30
      }
    },
    // Y轴配置：数值轴（净值数据）
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: (value) => value.toFixed(4)
      },
      min: (value) => Math.floor(value.min - 0.05),
      max: (value) => Math.ceil(value.max + 0.05)
    },
    // 数据缩放配置：提供滑块用于缩放X轴时间范围
    dataZoom: [
      {
        type: 'slider',
        xAxisIndex: 0,
        rangeMode: ['value', 'value'],
        bottom: 5,
        width: '94%',
        left: '3%',
        handleStyle: {
          color: '#409EFF',
          borderColor: '#409EFF'
        },
        trackStyle: {
          backgroundColor: '#E6F7FF'
        }
      }
    ],
    // 图表系列数据：仅保留单位净值折线
    series: [
      {
        name: '单位净值',
        type: 'line',
        data: [],
        smooth: true,
        symbol: 'circle',
        symbolSize: 6,
        lineStyle: { width: 2, color: '#409EFF' },
        itemStyle: { color: '#409EFF' },
        emphasis: { scale: true }
      }
    ]
  }

  // 将配置项应用到图表实例
  chartInstance.value.setOption(option)
  // 监听窗口大小变化，触发图表自适应
  window.addEventListener('resize', handleResize)
  return chartInstance.value
}

/**
 * 更新图表数据
 * @description 将传入的净值数据处理为ECharts所需的格式（时间戳+数值），并更新图表
 */
const updateChartData = () => {
  // 若图表实例未初始化或无数据，直接返回
  if (!chartInstance.value || !props.netValueData.length) return

  try {
    // 1. 对原始数据按日期排序（确保时间轴顺序正确）
    const sortedData = [...props.netValueData].sort((a, b) => new Date(a.date) - new Date(b.date))

    // 2. 处理单位净值数据：转换为[时间戳, 数值]格式
    const unitNavData = sortedData.map(item => [
      new Date(item.date).getTime(),  // 使用date字段而非netDate
      Number(item.unitNav)
    ])

    // 3. 更新图表数据
    chartInstance.value.setOption({
      series: [
        { data: unitNavData }  // 仅更新单位净值数据
      ],
      dataZoom: [
        {
          minValue: sortedData[0] ? new Date(sortedData[0].date).getTime() : null,
          maxValue: sortedData[sortedData.length - 1] ? new Date(sortedData[sortedData.length - 1].date).getTime() : null
        }
      ]
    })
  } catch (error) {
    ElMessage.error('处理净值数据失败：' + error.message)
  }
}

/**
 * 处理窗口大小变化
 */
const handleResize = () => {
  chartInstance.value?.resize()
}

/**
 * 监听净值数据变化
 * @description 当传入的netValueData变化时，更新图表数据
 */
watch(() => props.netValueData, (newData) => {
  if (newData && newData.length) {
    updateChartData()
  }
}, { deep: true })

/**
 * 组件挂载生命周期钩子
 */
onMounted(() => {
  nextTick(() => {
    initChart()
    // 若已有传入数据，更新图表
    if (props.netValueData.length) {
      updateChartData()
    }
  })
})

/**
 * 组件卸载生命周期钩子
 */
onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  if (chartInstance.value) {
    chartInstance.value.dispose()
  }
})
</script>

<style scoped>
/* 图表容器：占满父容器宽度 */
.net-value-chart-container {
  width: 100%;
}

/* 卡片头部：flex布局，用于对齐标题和可能的筛选组件 */
.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 日期范围选择器：预留样式 */
.date-range-picker {
  width: 400px;
}

/* 图表包裹层：固定高度，相对定位 */
.chart-wrapper {
  width: 100%;
  height: 400px;
  position: relative;
}

/* 图表容器：占满包裹层空间 */
.chart {
  width: 100%;
  height: 100%;
}

/* 图表图例：flex布局，居中显示，设置间距 */
.chart-legend {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  justify-content: center;
}
</style>